<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Vue中样式 -- style</title>
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- in 可以使用的类型： 普通数组，对象数组，对象，还有数字 -->

            <p>1. v-for循环普通数组</p>
            <div v-for="item in listNum">{{item}}</div>
            <div v-for="(item, index) in listNum">value: {{item}} -- index: {{index}}</div>

            <p>2. v-for循环对象数组</p>
            <div v-for="item in listObj">id: {{item.id}} -- name: {{item.name}}</div>
            <div v-for="(item,index) in listObj">id: {{item.id}} -- name: {{item.name}} -- index: {{index}}</div>

            <p>3. v-for循环对象</p>
            <!-- 注意：在遍历对象时， 除了有  value,key ,在第三个位置还有一个索引 -->
            <div v-for="(value,key) in obj">value: {{value}} -- key: {{key}}</div>
            <div v-for="(value,key,index) in obj">value: {{value}} -- key: {{key}} -- index: {{index}}</div>

            <p>4. v-for迭代数字</p>
            <!-- 注意：在遍历数字时，数值是从 1 开始 -->
            <div v-for="count in num">count: {{count}}</div>

            <p>5. v-for循环中的key属性</p>

            <div>
                <label>ID:
                    <input type="text"  v-model="id">
                </label>
                <label>Name:
                    <input type="text"  v-model="name">
                </label>
                <input type="button" value="添加" @click="add">
            </div>

            <!-- 注意： 在v-for 循环使用key时，key属性必须使用 v-bind 属性绑定的形式指定key的值，并且key属性值只能使用 number或者string -->
            <p v-for=" item in listKey" v-bind:key="item.id">
                <input type="checkbox"> {{item.id}} --- {{item.name}}
            </p>



        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    listNum: [1,2,3,4,5],

                    listObj:[
                        {id: 1, name: 'zsp1'},
                        {id: 2, name: 'zsp2'},
                        {id: 3, name: 'zsp3'},
                        {id: 4, name: 'zsp4'},
                    ],

                    obj:{ id: 1, name: 'zsppp'},

                    num:10,

                    listKey: [
                        {id:1,name:'李斯'},
                        {id:2,name:'嬴政'},
                        {id:3,name:'吕不韦'},
                        {id:4,name:'赵姬'},
                    ],
                    id:"",
                    name:"",

                },
                methods: {

                    add(){
                        // this.listKey.push({id:this.id,name:this.name})
                        var num = this.listKey.unshift({id:this.id,name:this.name})
                        console.log(num) //返回值是 数组的size
                    },
                },
            });
        </script>
    </body>
</html>
